<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园论坛 - 首页</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="container">
            <h1 class="logo">校园论坛</h1>
            <div class="user-info">
                <span id="user-nickname">游客</span>
                <a href="login.html" id="login-link">登录</a>
                <a href="register.html" id="register-link">注册</a>
                <a href="#" id="logout-link" style="display:none;">退出</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="navbar">
        <div class="container">
            <ul class="nav-menu">
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="index.html?sort=latest">最新帖子</a></li>
                <li><a href="index.html?sort=hot">热门帖子</a></li>
                <li><a href="index.html?sort=featured">精华帖子</a></li>
            </ul>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container main-content">
        <div class="sidebar">
            <!-- 分类区 -->
            <div class="category-box">
                <h3>帖子分类</h3>
                <ul id="category-list">
                    <li><a href="#" data-category="all">全部</a></li>
                    <li><a href="#" data-category="1">学习交流</a></li>
                    <li><a href="#" data-category="2">校园生活</a></li>
                    <li><a href="#" data-category="3">二手交易</a></li>
                    <li><a href="#" data-category="4">社团活动</a></li>
                </ul>
            </div>

            <!-- 统计信息 -->
            <div class="stats-box">
                <h3>论坛统计</h3>
                <p>今日发帖: <span id="today-posts">0</span></p>
                <p>总帖子数: <span id="total-posts">0</span></p>
                <p>会员总数: <span id="total-users">0</span></p>
            </div>
        </div>

        <div class="content">
            <!-- 帖子列表头部 -->
            <div class="post-list-header">
                <h2>帖子列表</h2>
                <a href="create-post.html" class="btn btn-primary" id="create-post-btn">发布新帖</a>
            </div>

            <!-- 帖子列表 -->
            <div class="post-list" id="post-list">
                <!-- 帖子卡片将通过JS动态生成 -->
                <div class="post-card">
                    <h3 class="post-title"><a href="post.html?id=1">欢迎来到校园论坛</a></h3>
                    <div class="post-meta">
                        <span class="author">管理员</span>
                        <span class="time">2024-01-01 10:00</span>
                        <span class="category">公告</span>
                    </div>
                    <div class="post-stats">
                        <span class="likes">👍 15</span>
                        <span class="comments">💬 8</span>
                        <span class="views">👁️ 102</span>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            <div class="pagination">
                <a href="#" class="prev">上一页</a>
                <a href="#" class="page active">1</a>
                <a href="#" class="page">2</a>
                <a href="#" class="page">3</a>
                <a href="#" class="next">下一页</a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <p>&copy; 2024 校园论坛. 保留所有权利.</p>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="assets/libs/jquery.min.js"></script>
    <script src="assets/js/common.js"></script>
    <script src="assets/js/index.js"></script>
</body>
</html>
